<template>
  <div>
    <a-modal :visible="true" :footer="null" :width="700" @cancel="cancelEvent" class="orderModal">
      <div class="infoModal">添加费用</div>
      <a-form-model ref="ruleForm" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules" class="formVideoModel">
        <a-form-model-item ref="companyName" label="合作单位名称" prop="companyName">
          <a-input v-model="form.companyName" @blur="() => {$refs.companyName.onFieldBlur();} " />

        </a-form-model-item>
        <a-form-model-item ref="contractName" label="合同名称" prop="contractName">
          <ContractSelect v-model="form.contractName"  @update="validateFieldContractName"  v-bind:fromCityList="form.contractName"></ContractSelect>
        </a-form-model-item>

        <a-form-model-item label="合同编号" ref="contractNo" prop="contractNo">
          <a-input v-model="form.contractNo" @blur="contractNoBlur" />
        </a-form-model-item>
        <a-form-model-item ref="contractPrice" label="结算金额" prop="contractPrice">
          <a-input v-model="form.contractPrice" @blur="() => { $refs.contractPrice.onFieldBlur();}" />
        </a-form-model-item>
        <a-form-model-item ref="description" label="说明" prop="description">
          <a-input v-model="form.description" @blur="() => {$refs.description.onFieldBlur();}" />
        </a-form-model-item>
        <a-form-model-item ref="startTime" label="结算开始时间" prop="startTime">
          <a-date-picker v-model="form.startTime" style="width:100%;" :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm" placeholder="选择时间" />
        </a-form-model-item>
        <a-form-model-item ref="endTime" label="结算结束时间" prop="endTime">
          <a-date-picker v-model="form.endTime" style="width:100%;" :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm" placeholder="选择时间" />
        </a-form-model-item>

        <a-form-model-item ref="annex" label="附件" prop="annex">
          <a-upload :showUploadList="false" :beforeUpload="fujianbeforeUpload">
            <a style="color:black">
              <a-icon type="upload" />上传附件
            </a>
          </a-upload>
          <div>{{fileName}}</div>
        </a-form-model-item>

        <a-form-model-item :wrapper-col="{ span: 10, offset: 10 }">
          <a-button type="primary" @click="onSubmit">
            提交
          </a-button>
          <a-button style="margin-left: 10px;" @click="onCancel">
            取消
          </a-button>
        </a-form-model-item>
      </a-form-model>

    </a-modal>

    <!-- -------//进度条----- -->
    <OSSVUE v-if="visiblejindu" v-bind:file="fileData" @uploadSuccessEvent="uploadSuccessEvent"></OSSVUE>
  </div>
</template>

<script>
import Vue from 'vue'
import { addCost,getContractNameSelect} from '@/api/video'
import { UploadToOss, UploadToOssmultipartUpload } from '@/utils/oss'
import OSSVUE from '@/views/videoManage/oss'
import ContractSelect from '@/views/videoManage/util/contractSelect'
export default {
  props: ['clickType'],
  components: { OSSVUE ,ContractSelect},
  data() {
    return {
      fileName: '',
      fileData: '',
      visiblejindu: false,
      format: 'YYYY-MM-DD',
      lodaing: false,
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      dataSource: [],
      form: { annex: '', id: '',contractName:'' ,contractNo:''},
      rules: {
        annex: [{ required: false, message: '请上传文件', trigger: 'blur' }],
        companyName: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        contractName: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        contractNo: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        contractPrice: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        description: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        endTime: [{ required: true, message: '请选择时间', trigger: 'change' }],
        startTime: [{ required: true, message: '请选择时间', trigger: 'change' }],
      },
    }
  },
  created() {},
  mounted() {
    Object.keys(this.form).forEach((key) => (this.form[key] = ''))
  },
  methods: {
    //编号输入框 失去焦点
    contractNoBlur(){
     getContractNameSelect('',this.form.contractNo)
        .then((response) => {
          if(response.data.length>0){
           this.form.contractName =response.data[0].contractName
           this.$refs.ruleForm.validateField('contractName') 
          }else{
           this.form.contractName =''
          }
         
        })
        .catch((error) => {})
    },
    validateFieldContractName(name,contractNo){
      this.form.contractNo = contractNo
      this.form.contractName =name
      this.$refs.ruleForm.validateField('contractName')
      this.$refs.ruleForm.validateField('contractNo')
     },
    //上传附件
    fujianbeforeUpload(file) {
      if (file != undefined) {
        this.visiblejindu = true
        this.fileData = file
        return false
      }
    },
    // 附件上传成功
    uploadSuccessEvent(data) {
      let name = data.name
      let arr = name.split('/')
      this.fileName = arr[2]
      this.form.annex = `http://gangmao.oss-cn-shenzhen.aliyuncs.com/${name}`
      this.visiblejindu = false
      let type = 'success'
      this.$notification[type]({
        message: '温馨提示',
        description: '上传成功!',
        duration: 3,
      })
    },
    renderTime(date) {
      var dateee = new Date(date).toJSON()
      return new Date(+new Date(dateee) + 8 * 3600 * 1000)
        .toISOString()
        .replace(/T/g, ' ')
        .replace(/\.[\d]{3}Z/, '')
    },
    dataFunction(dataTime) {
      var date = new Date(dataTime)
      var year = date.getFullYear()
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes
    },
    /**
     * 提交
     */
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.form.annex.length == 0) {
            let type = 'error'
            this.$notification[type]({
              message: '温馨提示',
              description: '请上传附件',
              duration: 3,
            })
            return
          }
          let form = JSON.parse(JSON.stringify(this.form))
          form.startTime = this.dataFunction(this.renderTime(form.startTime))
          form.endTime = this.dataFunction(this.renderTime(form.endTime))
          addCost(form).then((response) => {
            if (response != undefined) {
              if (response.code == 200) {
                let type = 'success'
                this.$notification[type]({
                  message: '温馨提示',
                  description: '添加成功!',
                  duration: 3,
                })
                this.$emit('successEvent')
              }
            }
          })
        } else {
          return false
        }
      })
    },
    phoneCheck(rule, value, callbackFn) {
      const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
      if (!reg.test(value)) {
        callbackFn('手机号码格式不正确')
        return
      }
      callbackFn()
    },
    handleChange(e) {
      this.form.roleName = e
    },
    onCancel() {
      this.$emit('cancelEvent')
    },
    handleTableChange() {},
    addMember() {},
    cancelEvent() {
      this.$emit('cancelEvent')
    },
  },
}
</script>

<style lang="less">
.infoModal {
  height: 51px;
  background: rgba(255, 255, 255, 1);
  border-radius: 6px 6px 0px 0px;
  text-align: center;
  line-height: 51px;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
}
</style>
